<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="lineBox">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <el-form-item label="事件类型">
            <el-input
              v-model="listQuery.event_type"
              placeholder="请输入事件类型"
              style="width: 200px;"
              size="mini"
              clearable
              @keyup.enter.native="handleFilter"
              @clear="handleFilter"
            />
          </el-form-item>
          <el-form-item label="人员/机构">
            <el-input
              v-model="listQuery.personnel_name"
              placeholder="请输入人员或机构名称"
              style="width: 200px;"
              size="mini"
              clearable
              @keyup.enter.native="handleFilter"
              @clear="handleFilter"
            />
          </el-form-item>
          <el-form-item label="目标国家">
            <el-input
              v-model="listQuery.country"
              placeholder="请输入目标国家"
              style="width: 200px;"
              size="mini"
              clearable
              @keyup.enter.native="handleFilter"
              @clear="handleFilter"
            />
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter">
              搜索
            </el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="handleReset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="myTable" style="min-height: 600px; margin-top: 20px;">
      <div style="margin-bottom: 10px;">
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          :disabled="selectedIds.length === 0"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
      </div>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        fit
        size="mini"
        highlight-current-row
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" prop="id" align="center" min-width="50" />
        <el-table-column label="档号" prop="dh" align="center" min-width="120" show-overflow-tooltip />
        <el-table-column label="事件类型" prop="event_type" align="center" min-width="120" show-overflow-tooltip />
        <el-table-column label="人员" prop="personnel_name" align="center" min-width="120" show-overflow-tooltip />
        <el-table-column label="目标国家" prop="country" align="center" min-width="120" show-overflow-tooltip />
        <el-table-column label="出国原因" prop="reason" align="center" min-width="200" show-overflow-tooltip />
        <el-table-column label="出国日期" align="center" min-width="100">
          <template slot-scope="{row}">
            {{ row.abroad_date | parseTime('{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column label="归国日期" align="center" min-width="100">
          <template slot-scope="{row}">
            {{ row.return_date | parseTime('{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" min-width="140">
          <template slot-scope="{row}">
            <span>{{ row.update_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="160" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button size="mini" type="primary" @click="handleViewDoc(row)">
              查看档案
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        size="mini"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { api } from '@/api/template'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'

export default {
  name: 'AbroadEvent',
  components: { Pagination },
  filters: {
    parseTime
  },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      selectedIds: [],
      listQuery: {
        pageNumber: 1,
        page: 1,
        limit: 10,
        event_type: undefined,
        personnel_name: undefined,
        country: undefined
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      try {
        const response = await api('getAbroadEventList', this.listQuery)
        if (response.code == 200) {
          this.list = response.data.resultList
          this.total = response.totalCount
          
          // 模拟请求时间
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        }
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
        this.listLoading = false
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleReset() {
      this.listQuery = {
        pageNumber: 1,
        page: 1,
        limit: 10,
        event_type: undefined,
        personnel_name: undefined,
        country: undefined
      }
      this.getList()
    },
    handleSelectionChange(val) {
      this.selectedIds = val.map(item => item.id)
    },
    handleViewDoc(row) {
      window.open(`/dashboard/docview?id=${row.article_id}`, '_blank')
    },
    async handleBatchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      
      try {
        await this.$confirm('此操作将永久删除选中的记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const response = await api('batchDeleteAbroadEvent', { ids: this.selectedIds })
        if (response.code == 200) {
          this.$notify({
            title: '成功',
            message: response.message || '批量删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        } else {
          this.$notify({
            title: '失败',
            message: response.message,
            type: 'error',
            duration: 2000
          })
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量删除失败:', error)
          this.$message.error('批量删除失败')
        }
      }
    },
    async handleDelete(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const data = { ids: [row.id] }
          const response = await api('batchDeleteAbroadEvent', data)
          if (response.code == 200) {
            this.$notify({
              title: '成功',
              message: response.message || '删除成功',
              type: 'success',
              duration: 2000
            })
            this.list.splice(index, 1)
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        } catch (error) {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

.myTable {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
</style>
